<template>
  <div class="formData">
    <div class="item" style="margin-bottom:24px;">
      <img src="@/assets/image/icon_account.png" alt="">
      <a-input placeholder="请输入手机号码" @change="messageerror = ''" v-model="phone" class="input" />
    </div>
    <div class="item" style="margin-bottom:24px;">
      <img src="@/assets/image/icon_pin.png" alt="">
      <a-input placeholder="请输入图形验证码" @change="messageerror = ''" v-model="imageCodeText" class="input" />
      <a-button class="button" size="large" style="width: 110px;margin-left: 16px;flex: none;letter-spacing: 5px;" @click="onCode()">{{imageCode}}</a-button>
    </div>
    <div class="item" style="margin-bottom:24px;">
      <img src="@/assets/image/icon_code.png" alt="">
      <a-input placeholder="请填写短信验证码" @change="messageerror = ''" v-model="codeText" class="input" />
      <a-button class="button" type="primary" size="large" style="width: 110px;margin-left:16px;flex: none;" @click="getCode">{{djs == '获取验证码'?"获取验证码":djs+"s"}}</a-button>
    </div>
    <div class="item">
      <img src="@/assets/image/icon_password.png" alt="">
      <a-input-password placeholder="请设置8-14位数字、字母组合的密码" @change="messageerror = ''" v-model="password" class="Password" />
    </div>
    <div class="item" style="margin-top:32px;">
      <p class="messageerror">{{messageerror}}</p>
      <a-button class="button" type="primary" size="large" :loading="loading" @click="register">立即注册</a-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      messageerror:"",
      consentClause:false,
      djs:"获取验证码",
      phone:"", //手机号
      imageCode: '', //图形验证码
      imageCodeText: '',
      codeText:"", // 验证码
      loading:false,
      password:"", // 密码
      flagTimeout: null,
      flag: true // 获取验证码状态
    }
  },
  methods:{
    // 更新验证码
    onCode(){
      this.imageCode = this.$fun.funCode()
    },
    // 验证一段验证码
    isCode(){
      let is = false
      // .toLocaleLowerCase() 忽略大小写验证
      if(this.imageCodeText.toLocaleLowerCase() === this.imageCode.toLocaleLowerCase()){
          is = true
      }else{
          is = false
      }
      return is
    },
    // 获取验证码
    getCode(){
      // console.log(this.phone)this.flag && ss
      if(this.djs != '获取验证码'){

      }else if(!this.phone){
        this.$message.error("请输入手机号码！")
      }else if(!/^1[3-9]\d{9}$/.test(this.phone)){
        this.$message.error("请检查手机号是否输入正确！")
      }else if(!this.isCode()){
        this.$message.error('请检查图形验证码！')
      }else if(this.phone && /^1[3-9]\d{9}$/.test(this.phone)){
        // this.flag = false;
        // this.flagTimeout = setTimeout(()=>{
        //   this.flag = true;
        // },60000)
        // this.loading = true;
        this.djs = 60;
        let interval = setInterval(()=>{
          if(this.djs == 1){
            this.djs = '获取验证码';
            clearInterval(interval);
          }else{
            this.djs--;
          }
        },1000)
        this.$ajax({
          url:"/user/userinfo/sendsms?mobile="+this.phone+"&type=1",
          method:"post"
        }).then((res)=>{
          if(res.code == 200){
            this.$message.success("验证码已发送，请注意查收！")
          }else{
            this.messageerror = res.msg;
            this.djs = '获取验证码';
            clearInterval(interval);
            // clearTimeout(this.flagTimeout);
            // this.flag = true;
          }
        })
      }
    },
    // 注册
    register(){
      // console.log(this.consentClause)
      if(!this.consentClause){
        this.messageerror = '请阅读并同意用户协议！';
        // this.$message.info('请阅读并同意用户协议！')
      }else if(!this.phone){
        this.messageerror = '请输入手机号！';
        // this.$message.error("请输入手机号！")
      }else if(!/^1[3-9]\d{9}$/.test(this.phone)){
        this.messageerror = '请输入正确的手机号！';
        // this.$message.error("请输入正确的手机号！")
      }else if(!this.isCode()){
        this.messageerror = '图形验证码不正确！';
        // this.$message.error("图形验证码不正确！")
      }else if(!this.codeText){
        this.messageerror = '请输入验证码！';
        // this.$message.error("请输入验证码！")
      }else if(!this.password){
        this.messageerror = '请输入密码！';
        // this.$message.error("请输入密码！")
      }else if(!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,14}$/.test(this.password)){
        this.messageerror = '密码格式不正确，请输入8-14位数字、字母组合的密码！';
        // this.$message.error("密码格式不正确，请输入8-14位数字、字母组合的密码！")
      }else{
        this.loading = true;
        this.$ajax({
          url:"/authority/user/register",
          method:"post",
          params:{
            userName:this.phone,
            mobile:this.phone,
            smsCode:this.codeText,
            password:this.password
          }
        }).then((res)=>{
          if(res.code == 200){
            // 清除下次默认登陆的状态
            // localStorage.setItem('loginStatus',false);
            // localStorage.setItem('userName','');
            // localStorage.setItem('password','');
            localStorage.setItem('rememberPassword',false);
            localStorage.setItem('userName','');
            localStorage.setItem('password','');
            this.$store.commit('changenickName',res.data.userinfo.nickName);
            this.$store.commit('changeresumeNo',res.data.userinfo.resumeNo);
            this.$store.commit('changepwdFlag',res.data.pwdFlag);
            this.$store.commit('changeroleType',res.data.userinfo.roleType);
            this.$store.commit('changemobile',res.data.userName);
            this.$store.commit('changepicture',res.data.userinfo.picture);
            this.$store.commit('changeToken',res.data.token);
            this.$store.commit('changeuserName',res.data.userName);
            this.$emit("changeTabIndex",3);
          }else{
            this.loading = false;
            this.messageerror = res.msg;
          }
        })
      }
    }
  },
  created(){
    this.onCode()
  },
  destroyed(){
    clearTimeout(this.flagTimeout);
  }
}
</script>

<style lang="less" scoped>
.item{
  position: relative;
  display: flex;
  flex-direction: row;
  >img{
    position: absolute;
    left: 12px;
    z-index: 9;
    width: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
  }
  .messageerror{
    position: absolute;
    left: 0px;
    top: -30px;
    color:#FF3333;
  }
}
.Password{
  height: 48px;
  /deep/.ant-input{
    height: 48px;
    padding-left: 40px;
  }
}
.input{
  height: 48px;
  padding-left: 40px;
}
.button{
  height: 48px;
  width: 100%;
}
</style>
